<template>
  <div ref="wrapper" class="dragWrapperMain" :style="puponStyle">
    <div class="dragHeader" ref="dragArea">
      <span class="title">{{ title }}</span>
      <i class="el-icon-close" @click="closeDragPane"></i>
      <slot name="header" />
    </div>
    <div class="dragBody user-scroll-bar">
      <slot name="default" />
    </div>
  </div>
</template>
<script>
// import { mapState } from "vuex";
export default {
  props: {
    title: {
      type: String,
      require: true,
      default: '请传入title',
    },
    width: {
      type: String,
      default: '290',
    },
    left: String,
    top: String,
    right: String,
    bottom: String,
  },
  data() {
    return {
      wrapperDom: null,
      headerDom: null,

      disX: 0,
      disY: 0,

      minLeft: 0,
      maxLeft: 0,

      minTop: 0,
      maxTop: 0,

      prevLeft: 0,
      prevTop: 0,
    }
  },
  computed: {
    puponStyle() {
      let obj = {
        width: `${this.width}px`,
        left: `${this.left}px`,
        top: `${this.top}px`,
      }
      if (this.right != '' && this.right != undefined) {
        delete obj.left
        obj.right = `${this.right}px`
      }
      if (this.bottom != '' && this.bottom != undefined) {
        delete obj.top
        obj.bottom = `${this.bottom}px`
      }
      if(this.left == '50%') {
        obj.left = '50%',
        obj.marginLeft = -this.width/2 + 'px'
      }
      return obj
    },
  },
  methods: {
    closeDragPane() {
      this.$emit('closePane')
    },
    initDrag() {
      this.wrapperDom = this.$refs.wrapper
      this.headerDom = this.$refs.dragArea
      this.headerDom.addEventListener('mousedown', this.onMousedown, false) // 点击头部区域拖拽
    },
    onMousedown(e) {
      // e.preventDefault();
      e.stopPropagation()
      this.disX = e.clientX - this.headerDom.offsetLeft
      this.disY = e.clientY - this.headerDom.offsetTop

      this.minLeft = this.wrapperDom.offsetLeft
      this.minTop = this.wrapperDom.offsetTop

      this.maxLeft =
        window.innerWidth - this.minLeft - this.wrapperDom.offsetWidth
      this.maxTop =
        window.innerHeight - this.minTop - this.wrapperDom.offsetHeight

      const { left, top } = getComputedStyle(this.wrapperDom, false)
      this.prevLeft = parseFloat(left)
      this.prevTop = parseFloat(top)

      document.addEventListener('mousemove', this.onMousemove, false)
      document.addEventListener('mouseup', this.onMouseup, false)
      document.body.style.userSelect = 'none' // 消除拖拽中选中文本干扰
    },
    onMousemove(e) {
      e.stopPropagation()
      let left = e.clientX - this.disX
      let top = e.clientY - this.disY

      if (-left > this.minLeft) {
        left = -this.minLeft
      } else if (left > this.maxLeft) {
        left = this.maxLeft
      }

      if (-top > this.minTop) {
        top = -this.minTop
      } else if (top > this.maxTop) {
        top = this.maxTop
      }

      this.wrapperDom.style.left = this.prevLeft + left + 'px'
      this.wrapperDom.style.top = this.prevTop + top + 'px'
      this.wrapperDom.style.right = ''
      this.wrapperDom.style.bottom = ''
    },
    onMouseup() {
      document.removeEventListener('mousemove', this.onMousemove, false)
      document.removeEventListener('mouseup', this.onMouseup, false)
      document.body.style.userSelect = 'auto' // 恢复文本可选中
    },
  },
  mounted() {
    this.initDrag()
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/globalVariable.scss';
.dragWrapperMain {
  position: fixed;
  z-index: 2022;
  background: #006064;
  .dragHeader {
    height: 50px;
    padding: 0 15px;
    @include flex(space-between);
    border-bottom: 1px solid #0d8c91;
    cursor: move;
    span {
      font-size: 18px;
      color: #fff;
      font-weight: bold;
    }
    i {
      font-size: 20px;
      color: #fff;
      cursor: pointer;
    }
  }
  .dragBody{
    max-height: calc(500vh * 100/1080);
    overflow-x: hidden;
  }
}
</style>
